<template>
  <a-modal
    :title="title"
    :width="650"
    :visible="visible"
    @cancel="handleCancel"
    switchFullscreen
  >
    <template slot="footer">
      <div style="text-align: right">
        <a-button
          type="primary"
          @click="handleCancel"
          >{{ $t("关闭") }}</a-button
        >
      </div>
    </template>
    <div style="padding: 20px">
      <a-table
        class="cus-table"
        bordered
        :dataSource="dataSource"
        :columns="columns"
        :pagination="false"
        :rowKey="(record) => record.id"
        :rowClassName="
          (record, index) =>
            index % 2 === 1 ? 'cus-table-row' : 'cus-table-row'
        "
      >
      </a-table>
    </div>
  </a-modal>
</template>

<script>
export default {
  name: "MealDetailModal",
  data() {
    return {
      title: "",
      visible: false,
      trans_disabled: false,
      columns: [{
        title: this.$t("商品编码"),
        dataIndex: "goodsCode",
        className: "cus-table-header",
        align: "center",
        width: "180px",
      },
      {
        title: this.$t("商品名称"),
        dataIndex: "goodsName",
        className: "cus-table-header",
        align: "center",
      },],
      dataSource: [],
    };
  },
  methods: {
    show(record) {
      let that = this;
      that.title = record.goodsName;
      that.dataSource = record.mealList;
      that.visible = true;
    },
    close() {
      this.visible = false;
    },
    handleCancel() {
      this.close();
    },
  },
};
</script>